<template>
  <div id="app">
    <img src="../../assets/red-bg.png" />
    <main>
      <h2>无人值守的KDC系统</h2>
      <section>
        <h3>用户登录</h3>
        <div class="item">
          用&nbsp;户&nbsp;名： <el-input v-model="form.name"></el-input>
        </div>
        <div class="item">
          密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：
          <el-input v-model="form.password" type="password"></el-input>
        </div>
        <el-button class="btn" @click="login">登录</el-button>
      </section>
    </main>
    <footer>copyright@成都卓源网络科技有限公司</footer>
  </div>
</template>

<script>
import { ref } from "vue";
import request from "../../http/request";

export default {
  setup() {
    const form = ref({
      name: "",
      password: "",
    });

    return {
      form,
    };
  },
  methods: {
    async login() {
      if (this.form.name == "") {
        this.$message.error("请输入用户名");
        return;
      }
      if (this.form.password == "") {
        this.$message.error("请输入密码");
        return;
      }
      const data = await (await request.login(this.form)).data;

      if (data.code == -1) {
        this.$message.error(data.message);
      } else if (data.code == 0) {
        sessionStorage.setItem("isL", true);
        sessionStorage.setItem("userInfo", JSON.stringify(data.data));
        this.$router.push("/home/system");
      }
    },
  },
};
</script>

<style  lang='scss' scoped>
#app {
  height: 100vh;
  background: url("../../assets/bg2.jpg") center no-repeat;
  background-size: cover;
  img {
    width: 100px;
    height: 100px;
    margin-top: 10px;
    margin-left: 10px;
  }
  footer{
     position: absolute;
   top:90%;
   left: 50%;
   transform: translate(-50%, -90%);
   color: #fff;
  }
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top:30%;
  left: 50%;
  transform: translate(-50%, -30%);
  h2,
  h3 {
    font-weight: 400;
  }
  h2 {
    margin-bottom: 40px;
    color: #fff;
    letter-spacing: 2px;
  }
}
section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 500px;
  height: 300px;
  border-radius: 10px;
  background: #fff;
  border: 20px solid #ebf4f9;

  h3 {
    color: #fff;
    width: 150px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #61b0d6;
    margin-bottom: 30px;
  }
}

.item {
  display: flex;
  width: 360px;
  align-items: center;
  flex-direction: row;
  color: #606266;
  margin-bottom: 40px;
}

.el-input {
  width: 300px;
}
.btn {
  background: #2e7fbb;
  color: #fff;
  width: 360px;
  letter-spacing: 10px;
}
</style>
